<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="城市诊断信息"
      :selectOptions="selectOptions"
    />
    <myBarHorizontal domId="urbanDiagnosticInfo-echarts" height="40vh" :chartsData="chartsData" :myOption="echartsOption" @clickFuc="clickFuc" />
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { overviewUrbanDiagnosticInfo } from "@/api/risk/cityWaringResult";
  import myBarHorizontal from '@/components/Echarts/myBarHorizontal.vue';
    export default {
        name: "urbanDiagnosticInfo",
        components: {
          formTitleVue, myBarHorizontal
        },
        props: {
          yearOptions:{},
          areaOptions: {},
        },
      data() {
        return {
          chartsData: {
            xData: [],
            yData: [],
          },
          echartsOption:{
            legend:{
              show:false,
            },
            yAxis: {
              data: []
            },
            grid: {
              left: '20%',
            },
          },
          selectOptions: [
            {
              key:"year",
              selectValue: "",
              options: [],
              changeFn: this.selectChange1,
            },
            {
              key:"area",
              selectValue: "",
              options: [],
              changeFn: this.selectChange2,
            },
          ],
          searChForm: {
            year:"",
            cityCode:""
          },
        }
      },
      watch:{
        'yearOptions':{
          handler(newVal, oldVal) {
            this.selectOptions.forEach(t=> {
              if (t.key == 'year') {
                t.options = newVal
              }
            })
          },
          deep: true,
          immediate: true
        },
        'areaOptions':{
          handler(newVal, oldVal) {
            this.selectOptions.forEach(t=> {
              if (t.key == 'area') {
                if(newVal){
                  t.options =  newVal
                }
              }
            })
          },
          deep: true,
          immediate: true
        },
      },
      methods: {
        clickFuc(params){
          if(this.searChForm.cityCode==''){
            this.$message.warning("请选择具体城市跳转")
            return
          }
          console.log('clickFuc==',params)
          this.$router.push({
                      // name: 'cityDetailDetail',
                      path:'/public/cityAnalysis/cityDetailDetail',
                      query: {
                          cityCode: this.searChForm.cityCode == ''?'44':this.searChForm.cityCode,
                          year: this.searChForm.year,
                          checkType:''
                },
          })
        },
        selectChange1(item){
          this.searChForm.year = item
          this.search()
        },
        selectChange2(item){
          this.searChForm.cityCode = item
          this.search()
        },
        search() {
          this.fetch({
            ...this.searChForm,
          })
        },
        fetch(params = {}) {
          overviewUrbanDiagnosticInfo(params).then(res => {
            if (res.code == 200) {
              console.log("overviewUrbanDiagnosticInfo=======",res.data)
              // this.tableData=res.data
              let data = res.data
              this.echartsOption.yAxis.data =res.data.xAxle
              this.chartsData.xData = res.data.data
            } else {
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          }).finally(final => {
          })
        },
        init(){
          this.selectOptions[0].selectValue = this.selectOptions[0].options[0].value
          this.searChForm.year = this.selectOptions[0].options[0].value
          this.searChForm.cityCode = ""
          this.search()
        },
      },
      mounted() {
        this.init()
      },
    }
</script>

<style scoped>

</style>
